/**-----------------------------------------------------------------
    ~~ flex  display: flex 相关布局类名
-------------------------------------------------------------**/

// 弹性盒布局 排列方向从左到右 默认换行 水平居左 垂直居中
.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

// 水平居中
.flex-center {
    justify-content: center;
}

// 水平居右
.flex-right {
    justify-content: flex-end;
}

// 水平居左
.flex-left {
    justify-content: flex-start;
}

// 垂直居上
.flex-top {
    align-items: flex-start;
}

// 垂直居下
.flex-bottom {
    align-items: flex-end;
}

// 弹性盒中每项占比 1-12
@for $i from 1 through 12 {
    .flex-flex-#{$i} {
        flex: #{$i};
    }
}

// 不换行
.flex-wrap-nowrap {
    flex-wrap: nowrap;
}

// 水平两端对齐 - 项目之间的间隔都相等
.flex-space-between {
    justify-content: space-between;
}
